<template>
    <div class="content">
        <e-heading>编辑资料</e-heading>
        <div class="user_piccont">
            <div class="user_pic">
                <e-avatar :src="person_info.iconUrl" />		
            </div>
            <div class="user_picedit">
                <p>
                  <e-img-upload @success="handleSuccess" :size="1024 * 1024 * 10" :accept="'image/jpeg'">
                    <el-button type="text" class="avatar-uploader">设置头像</el-button>
                  </e-img-upload>
                </p>
                <span>头像大小不超过10M</span>
            </div>
        </div>
        <div class="userinfo_list">
            <el-row>
                <el-col :span="3"><div class="grid-content bg-purple">名称：</div></el-col>
                <el-col :span="21"><div class="grid-content bg-purple-light">
                    <span v-show="noEditState[0]" class="isBold">{{person_info.nickName}}</span>
                    <!-- <el-input v-model="person_info.nickName" :disabled="noEditState[0]" class="user_input" v-show="!noEditState[0]" placeholder="请输入名称"></el-input><el-button type="text" @click="setUserName">{{btnName[0]}}</el-button> -->
                </div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="grid-content bg-purple">认证名称：</div></el-col>
                <el-col :span="21">
                  <div class="grid-content bg-purple-light">
                      <!--组织认证状态-->
                      <div v-if="person_info.authType === 2">
                        <div v-if="organize_info.authStatus === 1">
                          <span>认证审核中</span>
                        </div>
                        <div v-if="organize_info.authStatus === 2">
                          <span>审核未通过</span>
                          <router-link :to="'/organize/state'">
                            <el-button type="text">重新认证</el-button>
                          </router-link>
                        </div>
                        <div v-if="organize_info.authStatus === 4">
                          <span class="isBold">未认证</span>
                          <router-link :to="'/organize/state'">
                            <el-button type="text">去认证</el-button>
                          </router-link>
                        </div>
                        <div v-if="person_info.authStatus === 1 && person_info.pcImgtxtUrl">
                          <span><img :src="person_info.pcImgtxtUrl" height="16"></span>
                        </div>
                      </div>
                      <!--个人认证状态-->
                      <div v-else>
                        <div v-if="person_info.authStatus === 0">
                          <span class="isBold">未认证</span>
                          <router-link :to="'/organize/state'">
                            <el-button type="text">去认证</el-button>
                          </router-link>
                        </div>
                        <div v-if="person_info.authStatus === 1 && person_info.pcImgtxtUrl">
                          <span><img :src="person_info.pcImgtxtUrl" height="16"></span>
                        </div>
                      </div>
                  </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="grid-content bg-purple">联系邮箱：</div></el-col>
                <el-col :span="21"><div class="grid-content bg-purple-light" @keyup.enter="setEmail">
                    <span v-show="noEditState[1]">{{person_info.email? person_info.email:'未绑定邮箱'}}</span>
                    <el-input v-model="person_info.email" :disabled="noEditState[1]" class="user_input" v-show="!noEditState[1]" placeholder="请输入邮箱"></el-input><el-button type="button" @click="setEmail">{{btnName[2]}}</el-button></div></el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
  import authorizeApi from 'api/authorize'
  import EImgUpload from '@e-ui/ImgUpload'
  import { mapGetters } from 'vuex'
  import validator from 'utils/validator'
  export default {
    components: {
      EImgUpload
    },
    data () {
      return {
        nickName: '',
        btnName: ['修改', '去认证', '修改'],
        noEditState: [true, true],
        isBold: true,
        autorizeType: ''
      }
    },
    computed: {
      ...mapGetters({
        person_info: 'person_info',
        organize_info: 'organize_info'
      })
    },
    watch: {
      person_info (value) {
        if (value.authStatus === 0) {
          this.autorizeType = value.authType
          // 组织认证
          if (value.accpOrgList.length === 0) {
            this.$store.dispatch('organize_info')
            if (this.organize_info.authStatus === 4) {
              if (value.authType === 2) {
                this.$router.push('/organize/message/' + value.ipCateId)
              } else {
                this.$router.push('/organize/state')
              }
            }
          }
        }
      },
      organize_info (value) {
        if (value.authStatus === 4 && this.person_info.accpOrgList.length === 0) {
          if (this.autorizeType === 1) {
            this.$router.push('/organize/state')
          } else {
            this.$router.push('/organize/message/' + this.person_info.ipCateId)
          }
        } else if (value.authStatus === 1) { // 认证审核中
          this.$router.push('/organize/commit')
        } else if (value.authStatus === 2) { // 认证未通过
          this.$router.push('/organize/commit')
        }
      }
    },
    methods: {
      handleSuccess (url) {
        authorizeApi.editInfo({
          iconUrl: url
        }, {successMsg: '头像上传成功'}).then((res) => {
          this.isBold = true
          this.$set(this.noEditState, 0, true)
          this.$set(this.btnName, 0, '修改')
          this.$store.dispatch('person_info')
        }).catch((ERR) => {
          return false
        })
      },
      // 修改邮箱
      setEmail () {
        if (this.btnName[2] === '修改') {
          this.$set(this.noEditState, 1, false)
          this.$set(this.btnName, 2, '确定')
        } else {
          if (validator.pattern.email.test(this.person_info.email)) {
            authorizeApi.editInfo({
              email: this.person_info.email
            }, {
              context: this,
              successMsg: '邮箱修改成功'
            }).then((res) => {
              this.$set(this.noEditState, 1, true)
              this.$set(this.btnName, 2, '修改')
            }).catch((ERR) => {
              return false
            })
          } else {
            this.$message({
              message: '请输入正确的邮箱',
              type: 'error'
            })
          }
        }
      }
    }
  }
</script>

<style lang="scss">
   
    .user_piccont {
        display: flex;
        margin: 40px 0;
        padding-left: 30px;
        height: 100px;
        align-content: center;
        .user_pic {
            float: left;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .user_picedit {
            float: left;
            line-height: 2;
            height:62px;
            padding: 30px 0 0 35px;
            p span {
                color: $color-primary;
            }
            span {
                color: $color-sub;
            }
        }
    }
    
    .userinfo_list {
        .el-row {
            line-height: 36px;
            padding: 13px 0;
            &:last-child {
                margin-bottom: 0;
            }
            .bg-purple {
                text-align: right;
            }
            .bg-purple-light {
                span {
                    display: inline-block;
                    margin: 0 25px;
                }
            }
            .user_input {
                width: 260px;
                margin: 0 25px;
            }
            .bold {
                font-weight: bold;
            }
        }
    }
</style>
